import {useScrollTrigger as scrollTrigger} from "#gsap";

export function jsonToUrlParam(json:any) {
    return new URLSearchParams(json).toString();
}
export function useListAnimate(gsap:GSAP,ele: HTMLElement|Element | Element[]|HTMLElement[]) {
    gsap.registerPlugin(scrollTrigger);
    function getTl(el: HTMLElement|Element | Element[]|HTMLElement[]) {
        return gsap.timeline({
            smoothChildTiming: true,
            yoyo: true,
            scrollTrigger: {
                trigger: el,
                start: "-160px bottom",
                end: "center 80%",
                scrub: true,
                // pin: '#viewport',
                // markers: true,
                scroller: '#viewport',
                preventOverlaps: true,
            }
        });
    }
    function getTween(el:HTMLElement|Element|HTMLElement[]|Element[]):GSAPTween{
        return gsap.from(el, {
            opacity: 0.2,
            duration: 0.4,
            y: -160,
            scale: 0.4,
            rotate: 16,
            stagger: 0.06,
            ease: "power1.inOut",
        })
    }
    return {
        startTweenAnimate: ()=>getTween(ele),
        getTimeLine: ()=>getTl(ele),
        startScrollAnimate: ()=> {
            if(ele instanceof Array){
                const tls = ele.map(item=> ({
                    t: item,
                    tl: getTl(item)
                }));
                tls.forEach(item=> {
                    item.tl?.add(getTween(item.t))
                })
            }else{
                getTl(ele).add(getTween(ele))
            }
        }
    }
}